<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漏洞管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/layuiAdmin/css/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="border-radius: 0;border-top: 4px solid #d2d2d2;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">搜索条件</label>
                    <div class="layui-input-inline">
                        <select name="searchType">
                            <option value="macAddress">MAC地址</option>
                            <option value="hostName">主机名</option>
                            <option value="vulName">漏洞名</option>
                            <option value="vulLevel">漏洞等级</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-inline">
                        <input type="text" name="keywords" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-sysuser-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <!-- 表格数据加载 -->
            <table id="risk-vul-manage" lay-filter="risk-vul-manage"></table>

            <script type="text/html" id="table-useradmin-webuser">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-set"></i>详情</a>
            </script>

            <!-- CVE列表模板 -->
            <script type="text/html" id="cveListTpl">
                {{# if(d.cveList && d.cveList.length > 0){ }}
                <a class="layui-btn layui-btn-xs" lay-event="showCveList">查看CVE</a>
                {{# } }}
            </script>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script type="text/javascript">
    // 日期格式转换函数
    function formatDate(str) {
        if(str != null){
            var now = new Date(str);
            var year = now.getFullYear();  //取得4位数的年份
            var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
            var date = now.getDate();      //返回日期月份中的天数（1到31）
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            return year + "-" + month + "-" + date +" "+((hours>9)?hours:"0"+hours)+":"+((minutes>9)?minutes:"0"+minutes)+":"+((seconds>9)?seconds:"0"+seconds);
        }
        return "";
    }
</script>
<script type="text/javascript">
    layui.config({
        base: '/layui/layuiAdmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['layer','table','form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,table = layui.table;

        // 初始化表格，直接加载数据
        var tableIns = table.render({
            elem: '#risk-vul-manage',
            method: 'post',
            width: 'auto', // 自适应宽度
            cellMinWidth: 80, // 全局定义常规单元格的最小宽度
            title: '漏洞数据表',
            url: '/vul/list',
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            where: { // 添加空参数
                macAddress: '' // 或 null/undefined
            },
            cols: [
                [
                    {field: 'macAddress', title: 'MAC地址', width: 160},
                    {field: 'vulId', title: '漏洞ID', width: 160},
                    {field: 'vulName', title: '漏洞名', width: 160},
                    {field:'vulLevel',title:'漏洞等级',width:100, templet: function(d){
                            var color = '';
                            if(d.vulLevel === '高危') color = 'layui-btn-danger';
                            else if(d.vulLevel === '中危') color = 'layui-btn-warm';
                            else if(d.vulLevel === '低危') color = 'layui-btn-normal';
                            return '<button class="layui-btn '+color+' layui-btn-xs">'+d.vulLevel+'</button>';
                        }},
                    {field: 'vulDesc', title: '漏洞描述', width: 200},
                    {field: 'vulFlag', title: '漏洞Flag', width: 100},
                    {field: 'vulPath', title: '漏洞路径', width: 200},
                    {field: 'vulRequestType', title: '请求类型', width: 100},
                    {field: 'vulPayload', title: '漏洞负载', width: 200},
                    {field: 'detectTime', title: '检测时间', width: 160, templet: function(d){
                            return formatDate(d.detectTime);
                        }},
                    {field: 'cveList', title: 'CVE列表', width: 100, templet: '#cveListTpl'},
                    {fixed: 'right', title:'操作', toolbar: '#table-useradmin-webuser', width: 100}
                ]
            ],
            page: {
                curr: 1, // 设定初始在第 1 页
                limit: 15, // 设定初始每页显示 15 条
                limits: [10, 15, 20, 25, 30] // 每页条数的选择项
            }
        });

        // 监听搜索
        form.on('submit(LAY-sysuser-front-search)', function(data){
            var field = data.field;
            var searchParams = {};
            // 只有当选择了搜索条件且有关键词时才设置参数
            if (field.searchType && field.keywords) {
                searchParams[field.searchType] = field.keywords;
            }
            //执行重载
            tableIns.reload({
                where: searchParams
            });
        });

        // 监听表格行内操作
        table.on('tool(risk-vul-manage)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    type: 2,
                    title: '漏洞详情 - '+data.vulName,
                    content: '/page/vul/detail?id='+data.id,
                    area: ['800px', '500px'],
                    maxmin: true
                });
            } else if (obj.event === 'showCveList') {
                if (data.cveList && data.cveList.length > 0) {
                    var cveHtml = getCveListHtml(data.cveList);
                    layer.open({
                        type: 1,
                        title: data.vulName + ' - 相关CVE',
                        shadeClose: true,
                        area: ['300px', '400px'],
                        content: '<div style="padding: 15px;">' + cveHtml + '</div>'
                    });
                } else {
                    layer.msg('无相关CVE信息');
                }
            }
        });

        // 生成 CVE 列表的 HTML
        function getCveListHtml(cveList) {
            var html = '<ul class="layui-list">';
            layui.each(cveList, function(index, item){
                html += '<li class="layui-list-item">'+item+'</li>';
            });
            html += '</ul>';
            return html;
        }
    });
</script>

</body>
</html>
